import QtQuick
import QtQuick.Controls

Window {
    width: 400
    height: 600
    visible: true
    title: "ListView 样式定制示例"

    // 定义数据模型
    ListModel {
        id: contactModel
        ListElement { name: "张三"; avatar: "qrc:/images/avatar1.png"; status: "在线" }
        ListElement { name: "李四"; avatar: ""; status: "在线" }
        ListElement { name: "王五"; avatar: ""; status: "在线" }
        ListElement { name: "菜狗"; avatar: "qrc:/images/avatar2.png"; status: "离线" }
        ListElement { name: "老六"; avatar: "qrc:/images/avatar3.png"; status: "忙碌" }
    }

    ListView {
        anchors.fill: parent
        model: contactModel
        spacing: 2
        clip: true

        // 自定义header
        header: Rectangle {
            width: parent.width
            height: 50
            color: "#2D82B5"
            Text {
                anchors.centerIn: parent
                text: "联系人列表"
                font.pixelSize: 20
                color: "white"
            }
        }

        // 自定义delegate
        delegate: Rectangle {
            width: parent.width
            height: 80
            color: ListView.isCurrentItem ? "#BCE6FF" : "white"
            //border.color: "#B0B0B0"
            border.width: 0

            MouseArea {
                anchors.fill: parent
                onClicked: parent.ListView.view.currentIndex = index
            }

            Row {
                anchors.fill: parent
                anchors.margins: 10
                spacing: 10

                // 头像区域
                Item {
                    width: 60
                    height: 60

                    // 图片头像
                    Image {
                        id: avatarImage
                        anchors.fill: parent
                        source: avatar
                        visible: status === Image.Ready
                        fillMode: Image.PreserveAspectCrop

                        Rectangle {
                            anchors.fill: parent
                            color: "#999999A0"  // 半透明灰色
                            visible: model.status === "离线"
                        }
                    }

                    // 文字头像（当图片加载失败时显示）
                    Rectangle {
                        visible: avatarImage.status !== Image.Ready
                        anchors.fill: parent
                        radius: 30
                        color: "#E0E0E0"
                        Text {
                            anchors.centerIn: parent
                            text: name[0]
                            font.pixelSize: 24
                        }
                    }
                }

                Column {
                    anchors.verticalCenter: parent.verticalCenter
                    spacing: 5

                    Text {
                        text: name
                        font.pixelSize: 16
                        font.bold: true
                    }

                    Text {
                        text: status
                        color: {
                            if (status === "在线") return "#4CAF50"
                            if (status === "离线") return "#9E9E9E"
                            return "#F44336"
                        }
                    }
                }
            }
        }

        // 自定义section
        section.property: "status"
        section.delegate: Rectangle {
            width: parent.width
            height: 30
            color: "#F5F5F5"
            
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 10
                text: section
                font.bold: true
                color: "#2D82B5"
            }
        }
    }
} 
